<template>
	<view class="cemetery2">
		<view class="con">
			<view class="mbbg" v-if="dataObj.peopleList && dataObj.peopleList.length == 1">
				<view class="headList" v-for="(item, index) in dataObj.peopleList">
					<view class="time1">立于{{ dataObj.createdTime }}</view>
					<view class="xk">
						<view class="xiangkuang">
							<image :src="item.imageUrl" mode=""></image>
						</view>
						<view class="name">{{ item.name }}</view>
					</view>
					<view class="time2">生于{{ item.birthTime }}</view>
					<view class="time3">逝于{{ item.deathTime }}</view>
				</view>
			</view>
			<view class="mbbg2" v-if="dataObj.peopleList && dataObj.peopleList.length == 2">
				<view class="headList" v-for="(item, index) in dataObj.peopleList">
					<view class="time1">立于{{ dataObj.createdTime }}</view>
					<view class="xk">
						<view class="xiangkuang">
							<image :src="item.imageUrl" mode=""></image>
						</view>
						<view class="name">{{ item.name }}</view>
					</view>
					<view class="time2">生于{{ item.birthTime }}</view>
					<view class="time3">逝于{{ item.deathTime }}</view>
				</view>
			</view>
		</view>
	</view>

	<!-- 祭品的展示 -->
	<view class="oblationBox">
		<swiper class="oblationRow" circular :vertical="true" :autoplay="true">
			<swiper-item v-for="(items, index) in Math.ceil(oblationList.length / 7)">
				<image
					v-for="(item, index) in oblationList.slice((items - 1) * 7, items * 7)"
					:src="imgUrl + 'imgs/home/xianglu.png'"
					mode=""
				></image>
			</swiper-item>
		</swiper>
		<!-- <image v-for="(item,index) in 10" :src="imgUrl + 'imgs/home/xianglu.png'" mode=""></image> -->
	</view>

	<!-- 底部功能区 -->
	<view class="fixed">
		<!-- <Bubble :list="dataObj.offeringRecordList" /> -->
		<Bubble :list="[{}, {}, {}]" bgc="rgba(14, 14, 14, 0.25)" />
		<view class="fixed_con">
			<view class="fixed_con_" @click="gravestone">
				<image src="http://112.124.50.179:8888/imgs/home/G1.png" mode=""></image>
				<text>擦墓碑</text>
			</view>
			<view class="fixed_con_" @click="weed">
				<image src="http://112.124.50.179:8888/imgs/home/G2.png" mode=""></image>
				<text>除草</text>
			</view>
			<view class="fixed_con_" @click="openOblation">
				<image src="http://112.124.50.179:8888/imgs/home/G3.png" mode=""></image>
				<text>祭品</text>
			</view>
			<view class="fixed_con_" @click="koubaiRef.show = true">
				<image src="http://112.124.50.179:8888/imgs/home/G4.png" mode=""></image>
				<text>跪拜</text>
			</view>
			<view class="fixed_con_" @click="goUrl('/subPages/home/memoryHall/life_story')">
				<image src="http://112.124.50.179:8888/imgs/home/G5.png" mode=""></image>
				<text>生平</text>
			</view>
		</view>
	</view>

	<!-- 特效 -->
	<view>
		<!-- 擦墓碑 -->
		<div class="wipe-wrap" v-if="animation.gravestone">
			<div class="feather-duster-left">
				<image src="http://112.124.50.179:8888/imgs/home/LEFT.png" mode="widthFix" />
			</div>
			<div class="feather-duster-right">
				<image src="http://112.124.50.179:8888/imgs/home/RIGHT.png" mode="heightFix" />
			</div>
			<div class="shine shine1"></div>
			<div class="shine shine2"></div>
			<div class="shine shine3"></div>
			<div class="shine shine4"></div>
			<div class="shine shine5"></div>
		</div>
		<!-- 除草 -->
		<div class="grass-wrap" v-if="animation.weed">
			<div class="grass_small1 delayUp1 delayUp1">
				<image src="http://112.124.50.179:8888/imgs/home/c1.png" mode="widthFix" />
			</div>
			<div class="grass_small2 delayUp2 delayUp2">
				<image src="http://112.124.50.179:8888/imgs/home/c2.png" mode="widthFix" />
			</div>
			<div id="grassWrap">
				<div
					class="grass-item grass-item_1 weedAni1"
					data-t="1728982988565"
					style="animation-delay: 0s"
				>
					<image src="http://112.124.50.179:8888/imgs/home/c3.jpg" mode="widthFix" />
				</div>
				<div
					class="grass-item grass-item_4 weedAni2"
					data-t="1728982988675"
					style="animation-delay: 0.5s"
				>
					<image src="http://112.124.50.179:8888/imgs/home/c4.png" mode="widthFix" />
				</div>
				<div
					class="grass-item grass-item_2 weedAni3"
					data-t="1728982988814"
					style="animation-delay: 1s"
				>
					<image src="http://112.124.50.179:8888/imgs/home/c5.png" mode="widthFix" />
				</div>
				<div
					class="grass-item grass-item_5 weedAni4"
					data-t="1728982988862"
					style="animation-delay: 1.5s"
				>
					<image src="http://112.124.50.179:8888/imgs/home/c6.png" mode="widthFix" />
				</div>
				<div
					class="grass-item grass-item_3 weedAni5"
					data-t="1728982988923"
					style="animation-delay: 2s"
				>
					<image src="http://112.124.50.179:8888/imgs/home/c7.png" mode="widthFix" />
				</div>
			</div>
			<div class="glove-wrap"></div>
		</div>
		<!-- 跪拜 -->
		<view class="gif">
			<image
				class="gb"
				src="http://112.124.50.179:8888/imgs/home/gb.gif"
				v-if="animation.gb"
			></image>
			<image
				class="jg"
				src="http://112.124.50.179:8888/imgs/home/jg.gif"
				v-if="animation.jg"
			></image>
		</view>
	</view>

	<!-- 祭品 -->
	<oblation ref="oblationRef" :offeringType="2" @finish="finishOblation" />

	<!-- 跪拜 -->
	<koubai ref="koubaiRef" @koubai="handleKoubai"></koubai>

	<!-- 购买动画效果 -->
	<buyAni ref="buyAniRef" :pics="aniPics" />
</template>

<script setup>
import { defineEmits, defineProps, watch, ref, reactive } from 'vue';
import oblation from '@/subPages/common/oblation.vue';
import koubai from '@/subPages/common/koubai.vue';
import footerBtn from '/components/footerBtn/index.vue';
import popupCompVue from '/components/popup/index.vue';
import Bubble from '@/components/bubble/index.vue';
import buyAni from '@/subPages/common/buyAni.vue';
import { imgUrl } from '@/external/utils/imgUrl';
import _ from 'lodash';
import HomeApi from '@/API/home/index.js';
import store from '@/store/index.js';

const homeApi = new HomeApi();
let props = defineProps(['dataObj']);
let emit = defineEmits(['query']);
watch(
	props.dataObj,
	(n, o) => {
		setTimeout(() => {
			props.dataObj.createdTime = numberChinese(props.dataObj.createdTime, true);
			props.dataObj.peopleList.forEach((ele) => {
				ele.birthTime = numberChinese(ele.birthTime, false);
				ele.deathTime = numberChinese(ele.deathTime, false);
			});
		}, 500);
	},
	{
		immediate: true
	}
);
const showFunc = ref(true);  //是否展示功能区
const animation = reactive({
	gravestone: false,
	weed: false,
	jg: false,
	gb: false
});
const oblationRef = ref();
const koubaiRef = ref();
const buyAniRef = ref(); //购买动画
const aniPics = ref([]); //购买的图片
const ybCoinNumber = ref(0); //福币余额
const userName = ref(''); //用户名称
let timer = ref(null);
//祭品摆放
const oblationList = reactive([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);

/**
 * 除草
 */
const weed = () => {
	if (!timer.value) {
		homeApi
			.weedApi({
				memorialId: JSON.parse(uni.getStorageSync('cemeteryItem')).memorialId,
				actiontype: 3
			})
			.then((res) => {
				animation.weed = true;
				timer.value = setTimeout(() => {
					animation.weed = false;
					timer.value = null;
				}, 5000);
				// emit('query')
			});
	}
};

/**
 * 擦墓碑
 */
const gravestone = () => {
	if (!timer.value) {
		homeApi
			.weedApi({
				memorialId: JSON.parse(uni.getStorageSync('cemeteryItem')).memorialId,
				actiontype: 2
			})
			.then((res) => {
				animation.gravestone = true;
				timer.value = setTimeout(() => {
					animation.gravestone = false;
					timer.value = null;
				}, 5000);
				// emit('query')
			});
	}
};

/**
 * 叩拜行礼
 */
const handleKoubai = (item, index) => {
	koubaiRef.value.show = false;
	showGif(index);
};

/**
 * 跪拜动图
 */
const showGif = (type) => {
	if (!timer.value) {
		homeApi
			.weedApi({
				memorialId: JSON.parse(uni.getStorageSync('cemeteryItem')).memorialId,
				actiontype: 1
			})
			.then((res) => {
				if (type === 1) {
					//跪拜
					animation.gb = true;
					timer.value = setTimeout(() => {
						animation.gb = false;
						timer.value = null;
					}, 6500);
				} else if (type === 2) {
					//鞠躬
					animation.jg = true;
					timer.value = setTimeout(() => {
						animation.jg = false;
						timer.value = null;
					}, 6500);
				}
			});
	}
};

const openOblation = () => {
	oblationRef.value.show = true;
};

function numberChinese(str, isYear) {
	if (str) {
		let chinese = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十'];
		let numStr = str.replace(/[^0-9]+/g, '');
		let year =
			chinese[numStr[0]] + chinese[numStr[1]] + chinese[numStr[2]] + chinese[numStr[3]];
		let month = numStr[4] === '0' ? chinese[numStr[5]] : chinese[10];
		let day = '';
		if (numStr[6] === '0') {
			day = chinese[numStr[7]];
		} else if (numStr[6] === '1') {
			if (numStr[7] === '0') {
				day = chinese[10];
			} else {
				day = chinese[10] + chinese[numStr[7]];
			}
		} else if (numStr[6] === '2' || numStr[6] === '3') {
			if (numStr[7] === '0') {
				day = chinese[numStr[6]] + chinese[10];
			} else {
				day = chinese[numStr[6]] + chinese[10] + chinese[numStr[7]];
			}
		}
		if (isYear) {
			return year + '年';
		} else {
			return year + '年' + month + '月' + day + '日';
		}
	}
}

/**
 * 获取个人信息
 */
const getUserInfo = async () => {
	if (!store.state.userInfo.userInfo.phoneNumber) {
		await store.dispatch('setUserInfo');
	}
	ybCoinNumber.value = store.state.userInfo.userInfo.ybCoinNumber;
	userName.value =
		store.state.userInfo.userInfo.nickName || store.state.userInfo.userInfo.phoneNumber;
};

/**
 * 购买贡品成功
 */
const finishOblation = async (buyList) => {
	//获取个人信息，更新用户福币
	await store.dispatch('setUserInfo');
	getUserInfo();

	//购买动画
	aniPics.value = buyList;
	buyAniRef.value.show = true;

	// 动画结束后再执行
	//获取展示祭品
	setTimeout(() => {
		getOfferingInfo();
	}, 2000);
};

const goUrl = (url) => {
	uni.navigateTo({
		url: url
	});
};
</script>

<style lang="scss">
@import '/static/css/animation.css';

.cemetery2 {
	color: #fff;
	position: relative;

	.con {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		position: relative;
		top: 302rpx;

		.mbbg {
			background: url('http://112.124.50.179:8888/imgs/home/mymb.png') no-repeat;
			background-size: cover;
			background-position: center;
			height: 400rpx;
			width: 100%;
			display: flex;
			justify-content: center;

			.headList {
				display: flex;
				position: relative;

				.xk {
					display: flex;
					position: absolute;
					left: -16rpx;
					top: 30rpx;

					.xiangkuang {
						background: url('http://112.124.50.179:8888/imgs/home/xiangkuang.png')
							no-repeat;
						background-size: cover;
						background-position: center;
						width: 42rpx;
						height: 56rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						image {
							width: 82%;
							height: 85%;
						}
					}
				}

				.name {
					font-size: 18px;
					transform: scale(0.5);
					display: flex;
					justify-content: center;
					align-items: center;
					position: relative;
					top: 16rpx;
					letter-spacing: 4rpx;
				}

				.time1 {
					font-size: 12px;
					transform: scale(0.5);
					position: absolute;
					left: -60rpx;
					top: 0rpx;
					letter-spacing: 4px;
				}

				.time2 {
					font-size: 12px;
					transform: scale(0.5);
					position: absolute;
					right: -55rpx;
					top: -30rpx;
					letter-spacing: 4px;
				}

				.time3 {
					font-size: 12px;
					transform: scale(0.5);
					position: absolute;
					right: -75rpx;
					top: -25rpx;
					letter-spacing: 4px;
				}

				view {
					color: black;
					writing-mode: vertical-lr;
				}
			}
		}

		.mbbg2 {
			background: url('http://112.124.50.179:8888/imgs/home/mymb2.png') no-repeat;
			background-size: cover;
			background-position: center;
			height: 400rpx;
			width: 100%;
			display: flex;
			justify-content: center;

			.headList:nth-child(1) {
				right: 60rpx;
			}

			.headList:nth-child(2) {
				left: 120rpx;
			}

			.headList {
				display: flex;
				position: relative;

				.xk {
					display: flex;
					position: absolute;
					left: -18rpx;
					top: 30rpx;

					.xiangkuang {
						background: url('http://112.124.50.179:8888/imgs/home/xiangkuang.png')
							no-repeat;
						background-size: cover;
						background-position: center;
						width: 36rpx;
						height: 48rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						image {
							width: 82%;
							height: 85%;
						}
					}
				}

				.name {
					font-size: 16px;
					transform: scale(0.5);
					display: flex;
					justify-content: center;
					align-items: center;
					position: relative;
					top: 16rpx;
					letter-spacing: 8rpx;
				}

				.time1 {
					font-size: 12px;
					transform: scale(0.4);
					position: absolute;
					left: -56rpx;
					top: -20rpx;
					letter-spacing: 8px;
				}

				.time2 {
					font-size: 12px;
					transform: scale(0.4);
					position: absolute;
					right: -42rpx;
					top: -70rpx;
					letter-spacing: 8px;
				}

				.time3 {
					font-size: 12px;
					transform: scale(0.4);
					position: absolute;
					right: -58rpx;
					top: -60rpx;
					letter-spacing: 8px;
				}

				view {
					color: black;
					writing-mode: vertical-lr;
				}
			}
		}
	}
}

.invite {
	background: rgba(255, 255, 255, 0.2);
	padding: 0 16rpx;
	height: 54rpx;
	border-radius: 0 27rpx 27rpx 0;
	color: #fff;
	font-size: 24rpx;
	display: flex;
	align-items: center;
	justify-content: center;

	image {
		padding-left: 4rpx;
		width: 32rpx;
		height: 32rpx;
	}
}

.fixed {
	position: fixed;
	bottom: calc(constant(safe-area-inset-bottom));
	bottom: calc(env(safe-area-inset-bottom));
	left: 0;
	right: 0;
	padding: 24rpx 32rpx;
	z-index: 50;

	@media screen and (min-width: 992px) {
		width: 828rpx;
		margin: 0 auto;
		box-sizing: border-box;
	}

	.fixed_con {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: nowrap;
		height: 104rpx;
		margin-top: 72rpx;

		.fixed_con_ {
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;

			text {
				font-weight: bold;
				font-size: 28rpx;
				color: #ffffff;
				line-height: 42rpx;
				letter-spacing: 1px;
				text-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
				text-stroke: 1rpx #8d5d2c;
				text-align: center;
				font-style: normal;
				text-transform: none;
				-webkit-text-stroke: 1rpx #8d5d2c;
				margin-top: -30rpx;
				z-index: 999;
			}
		}

		image {
			width: 104rpx;
			height: 104rpx;
		}
	}
}

.oblationBox {
	width: 100%;
	position: absolute;
	top: 800rpx;

	.oblationRow {
		width: 100%;
		height: 96rpx;
	}

	swiper-item {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	image {
		width: 96rpx;
		height: 96rpx;
		z-index: 99;
	}
}
</style>
